
<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加新的业务员"
    width="500"
    :before-close="handleClose"
  >
  <el-form 
  :model="addObj" label-width="auto" style="max-width: 600px"
  :rules="easyrules"
   ref="formRef"
  >
    <el-form-item label="姓名" prop = "name">
      <el-input v-model="addObj.name" placeholder="请输入姓名" />
    </el-form-item>
    <el-form-item label="性别" prop = "sex">
      <el-select v-model="addObj.sex" placeholder="请选择性别" autocomplete="off">
          <el-option  label = "男" value = "男"    />
          <el-option  label = "女" value = "女"    />
        </el-select>
    </el-form-item>
    <el-form-item label="用户名" prop = "username">
      <el-input v-model="addObj.username" placeholder="请输入用户名"/>
    </el-form-item>
    <el-form-item label="邮箱" prop = "mail">
      <el-input v-model="addObj.sendTo" placeholder="请输入你的邮箱"/>
    </el-form-item>
  </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="addSave">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div class="common-layout">
    <el-container>
        <el-aside width="200px"><el-radio-group v-model="isCollapse" style="margin-bottom: 0px;">
    <el-radio-button :value="false">展开</el-radio-button>
    <el-radio-button :value="true">隐藏</el-radio-button>
  </el-radio-group>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    router = "true"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>功能</span>
      </template>
      <el-menu-item-group>
        <template #title><span>关于车辆</span></template>
        <el-menu-item index="1-1" route = "brand">车辆品牌大全</el-menu-item>
        <el-menu-item index="1-1" route = "vehicles">车库</el-menu-item>
        <el-menu-item index="1-2" route = "returncheck">还车检查</el-menu-item>
        <el-menu-item index="1-3" route = "tenance">维修记录</el-menu-item>
        <el-menu-item index="1-3" route = "chart">图表</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="人员">
        <el-menu-item index="1-3" route = "stafflist">员工信息</el-menu-item>
        <el-menu-item index="1-3" route = "user">业务员信息</el-menu-item>
      </el-menu-item-group>
      
    </el-sub-menu>
    <el-menu-item index="2" route = "customer">
      <el-icon><Avatar /></el-icon>
      <template #title>客户信息</template>  
    </el-menu-item>
    <el-menu-item index="3" route = "order">
      <el-icon><document /></el-icon>
      <template #title>租赁订单</template>
    </el-menu-item>
    <!-- <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item> -->
  </el-menu></el-aside>
    <el-container>
  <el-header>
    <el-page-header :icon="null">
    <template #content>
      <div class="flex items-center">
        <el-avatar
          :size="32"
          class="mr-3"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        <span class="text-large font-600 mr-3"> 
        当前业务员： {{ username.name }}
        </span>
        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
         
        </span>
       
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <!-- <el-button>Print</el-button> -->
        <el-button type="primary" @click="editpass">修改密码</el-button>
        <el-button type="danger" class="ml-2" @click = "exitOut">退出登录</el-button>
        <el-button type="success" class="ml-2" @click = "adduser">添加新用户</el-button>
      </div>
    </template>
  </el-page-header>

  </el-header>
        <el-main> 
          <div class="background-image"></div>
          <router-view></router-view> <!--车辆信息的路由占位符--></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.background-image {
  position: absolute; /* 使用绝对定位 */
  top: 0;
  left: 0;
  width: 100%; /* 宽度设置为100%，但不影响布局 */
  height: 100%; /* 同样高度设置为100% */
  background-image: url('../images/beijing.jpg'); /* 设置背景图片 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中显示 */
  z-index: -1; /* 确保背景图片在其他内容的下方 */
  margin: 0; /* 确保没有外边距 */
  padding: 0; /* 确保没有内边距 */
  overflow: hidden; /* 如果背景图片超出，隐藏超出部分 */
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Avatar
} from '@element-plus/icons-vue'

//引入路由
import { useRouter } from 'vue-router'
//获取路由器
let router = useRouter()
const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
let headimg = sessionStorage.getItem('token')
const exitOut = function(){
    sessionStorage.removeItem("token");
    location.reload();//刷新页面
  }
  const username = ref({});
   username.value.name = localStorage.getItem("username");
console.log("------")
   console.log(username);
   const editpass = function(){
    router.push('/editpass');
   }
   import api from '../api'
   const dialogVisible = ref(false);
   const adduser = function(){
    dialogVisible.value = true;
   }
   import { ElMessageBox, ElMessage } from 'element-plus'
   const addSave = async function(){
    dialogVisible.value = false;
    formRef.value.validate(async (valid) => {
      if(valid){
        let result = await api.add("api/send-mail/simple",addObj.value);
        console.log("---------------------------------")
    if(result.code == 200){
      ElMessage({
                type: 'success',
                message: "请关注你的邮箱 接收密码"
            });
    }
      }
    })
  
   }
   const checkname=function(rule,value,callback){
    let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
    //    正则表达式
    //    表示字符位数量  {N} {N,M}  {N,}   ?有或有一个   +最少有一个   *任意个数
    //    中括号表示一个字符位  [ab]  这个字符位可以是a也可以是b
    //[]   [a-z]   代表a到z   [0-8]     [abc]{8,11}
    //     .  代表任意字符    .{20}

    //   元字符    \d   0-9     \w  0-9_A-z   \D  排除掉所有数字    \W
    //[0-9A-z]{6,16}
    if(reg.test(addObj.value.name)){
        callback();
    }else{
        callback(new Error('输入不能为空'))
    }
}
const checkusername=function(rule,value,callback){
    let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
    //    正则表达式
    //    表示字符位数量  {N} {N,M}  {N,}   ?有或有一个   +最少有一个   *任意个数
    //    中括号表示一个字符位  [ab]  这个字符位可以是a也可以是b
    //[]   [a-z]   代表a到z   [0-8]     [abc]{8,11}
    //     .  代表任意字符    .{20}

    //   元字符    \d   0-9     \w  0-9_A-z   \D  排除掉所有数字    \W
    //[0-9A-z]{6,16}
    if(reg.test(addObj.value.username)){
        callback();
    }else{
        callback(new Error('输入不能为空'))
    }
}
const checksex=function(rule,value,callback){
    let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
    //    正则表达式
    //    表示字符位数量  {N} {N,M}  {N,}   ?有或有一个   +最少有一个   *任意个数
    //    中括号表示一个字符位  [ab]  这个字符位可以是a也可以是b
    //[]   [a-z]   代表a到z   [0-8]     [abc]{8,11}
    //     .  代表任意字符    .{20}

    //   元字符    \d   0-9     \w  0-9_A-z   \D  排除掉所有数字    \W
    //[0-9A-z]{6,16}
    if(reg.test(addObj.value.sex)){
        callback();
    }else{
        callback(new Error('输入不能为空'))
    }
}
const checkmail=function(rule,value,callback){
    let reg=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    //    正则表达式
    //    表示字符位数量  {N} {N,M}  {N,}   ?有或有一个   +最少有一个   *任意个数
    //    中括号表示一个字符位  [ab]  这个字符位可以是a也可以是b
    //[]   [a-z]   代表a到z   [0-8]     [abc]{8,11}
    //     .  代表任意字符    .{20}

    //   元字符    \d   0-9     \w  0-9_A-z   \D  排除掉所有数字    \W
    //[0-9A-z]{6,16}
    if(reg.test(addObj.value.sendTo)){
        callback();
    }else{
        callback(new Error('输入的格式不正确'))
    }
}
   const addObj = ref({});
   const easyrules= {
  username:[{validator:checkusername,trigger:'blur'}],
  name:[{validator:checkname,trigger:'blur'}],
  mail:[{validator:checkmail,trigger:'blur'}],
  sex:[{validator:checksex,trigger:'blur'}],
  
};

const formRef=ref({});
</script>